<template>
	<div class="user-homepage">
		<NavbarTop></NavbarTop>
		<div class="w">
			<div class="bg">
				<div class="avatar">
					<el-avatar :src="`${ENV.VITE_BASE_URL}${userinfo.avatar}`" />
				</div>
				<h1>
					{{ userinfo.nickName }}
					<svg class="icon" aria-hidden="true">
						<use v-bind:xlink:href="userinfo.gender === 0 ? '#icon-nanxing' : userinfo.gender === 1 ? '#icon-nanxing' : '#icon-weizhi'"></use>
					</svg>
				</h1>
				<p>介绍一下自己吧</p>
				<div class="funt_area">
					<el-button type="primary">关注</el-button>
					<el-button type="primary">私信</el-button>
				</div>
			</div>
			<nav>
				<router-link :class="{ active: useRoute().path === `/userhomepage/${userid}` }" :to="`/userhomepage/${userid}`">{{ useUserinfoStore().userinfo.user_id === Number(userid) ? "我的主页" : userinfo.gender === 1 ? "他的主页" : userinfo.gender === 0 ? "她的主页" : "他/她的主页" }}</router-link>
				<router-link :class="{ active: useRoute().path === `/userhomepage/${userid}/management` }" :to="`/userhomepage/${userid}/management`" v-if="useUserinfoStore().userinfo.user_id === Number(userid)">管理中心</router-link>
			</nav>
			<router-view></router-view>
		</div>
	</div>
</template>

<script setup lang="ts">
import { getUserinfoById } from "@/api/user";
import NavbarTop from "@/components/navbarTop.vue";
import { ref, toRef } from "vue";
import { useRoute } from "vue-router";
import { useUserinfoStore } from "@/stores/userinfo";

const ENV = import.meta.env;
const {
	params: { userid }
} = useRoute();

let userinfo = ref({ avatar: "", nickName: "", gender: 2 });
getUserinfoById(Number(userid)).then(({ data: { data } }) => {
	userinfo.value = data;
});
</script>

<style scoped lang="scss">
.user-homepage {
	padding-top: 50px;
	background: url(/src/assets/images/body_bg.jpg) no-repeat top center #b4daef;
	overflow-x: hidden;
	min-height: calc(100vh - 50px);
}
.bg {
	height: 300px;
	margin-top: 20px;
	background: url("https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/21a4462309f7905237e7f46d04f3d7ca7acbd5ed.jpg") no-repeat center;
	background-size: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.avatar {
		width: 120px;
		height: 120px;
		background-color: rgba($color: #fff, $alpha: 0.3);
		position: relative;
		border-radius: 60px;
		.el-avatar {
			position: absolute;
			top: calc(50% - 55px);
			left: calc(50% - 55px);
			width: 110px;
			height: 110px;
		}
	}
	h1 {
		font-size: 22px;
		position: relative;
		color: #fff;
		font-weight: normal;
		svg {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: -20px;
		}
	}
	p {
		font-size: 12px;
		color: #fff;
	}
}
.bg > *:not(:last-child) {
	margin-bottom: 5px;
}
nav {
	height: 40px;
	background-color: #fff;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin-bottom: 15px;
	a {
		height: 100%;
		line-height: 40px;
		padding: 0 10px;
	}
	a:hover,
	.active {
		border-bottom: 3px solid $orange;
	}
}
</style>
